<template>
    <div class="home-page">

        <!-- 主体内容 -->
        <el-main>
            <div class="temp1">
                

                <!-- 统计数据 -->
                <el-row :gutter="20">
                    <el-col :span="8" v-for="stat in stats" :key="stat.title">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>{{ stat.title }}</span>
                            </div>
                            <div>{{ stat.value }}</div>
                        </el-card>
                    </el-col>
                </el-row>

                <!-- 卡片组件 -->
                <el-row :gutter="20">
                    <el-col :span="8" v-for="n in 3" :key="n">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>卡片标题 {{ n }}</span>
                            </div>
                            <div>卡片内容</div>
                        </el-card>
                    </el-col>
                </el-row>

                <h2>
                    点击总数：<span class="count">{{ count }}</span>
                </h2>
                <el-button type="success" @click="add">+1</el-button>
            </div>
        </el-main>


    </div>
</template>

<script setup>

import { ref,reactive } from 'vue'
import axios from 'axios'
import { storeToRefs } from 'pinia'

import { count as co } from '../main'
const store = co()
const { count } = storeToRefs(store)
const add = () => {
    store.increment()
}

const showUserInfo = () => {
    alert('这里可以显示用户的详细信息');
};

// 模拟统计数据
const stats = reactive([
    { title: '今日访问量', value: '123' },
    { title: '总访问量', value: '4567' },
    { title: '活跃用户数', value: '89' }
]);
</script>

<style lang="scss" scoped>
.home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    .el-header,
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        padding: 10px;
    }

    .el-main {
        flex: 1;
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        padding: 20px;
    }

    .temp1 {
        margin-top: 20px;

        .count {
            color: #f00;
            font-weight: bold;
        }
    }

    .box-card {
        margin-bottom: 20px;
    }
}
</style>
